<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		       <style type="text/css">
		       			#div1{
		       							width: 500px;
		       							height: 500px;
		       							background-color:  #DEB887;
		       							
		       							
		       						}
		       						#div2{
		       							width: 400px;
		       							height: 400px;
		       							background-color:  #9FFF45;
		       							margin-top: 25px;
		       							margin-left: 50px;
		       						}
		       						#div3{
		       							width: 300px;
		       							height: 300px;
		       							background-color: #FFFF00
		       							margin-top: 25px;
		       							margin-left: 50px;
		       						}
		       						#div4{
		       							width: 200px;
		       							height: 200px;
		       							background-color: #ff57db;
		       							margin-top: 25px;
		       							margin-left: 50px;
		       						}
		       			
		       		</style>
	</head>
	<body>
		<div id="div1">
			第一个div
			<div id="div2">
				第二个div
				<div id="div3">
					第三个div
					<div 
					
					
					id="div4">
                        第四个div						
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var dv1=document.getElementById('div1');
				console.log('1级父元素为:'+console.log(dv1.parentElement));
				console.log('1级父节点为:'+console.log(dv1.parentNode));
				var dv2=document.getElementById('div2');
				console.log('2级父元素为:'+console.log(dv2.parentElement));
				console.log('2级父节点为:'+console.log(dv2.parentNode));
				var dv3=document.getElementById('div3');
				console.log('3级父元素为:'+console.log(dv3.parentElement));
				console.log('3级父节点为:'+console.log(dv3.parentNode));
				var dv4=document.getElementById('div4');
				console.log('4级父元素为:'+console.log(dv4.parentElement));
				console.log('4级父节点为:'+console.log(dv4.parentNode));
				var d1=document.getElementById('div1');
				console.log(d1.children);
				console.log(d1.childNodes);
				var d2=document.getElementById('div2');
				console.log(d2.children);
				console.log(d2.childNodes);
				var d3=document.getElementById('div3');
                console.log(d3.children);
		        console.log(d3.childNodes);
				
	</script>
</html>

<!-- 4.制作4个嵌套DIV ，要求：
      1.每个父DIV尺寸必须大于子DIV
      2.实现每个DIV在父DIV正中间
      3.每个DIV至少要包含一个非DIV元素，比如：文字，P标签，A标签，图片等
      4.通过最底层DIV，打印每层父DIV，如：
	1级父元素为（），1级父节点为（）
	2级父元素为（），2级父节点为（）
	....
      5.查找每个DIV的子元素和子节点
 -->
